<template>
  <div>
    <dl class="commend">
      <dt>
        <div style="display: flex">
          <img :src="v.avator" alt="" />
          <h4>{{ v.name }}</h4>
        </div>
        <div></div>
      </dt>
      <dd>
        <!-- <van-text-ellipsis rows="3" :content="v.content" expand-text="展开" collapse-text="收起" /> -->
        <div style="position: relative; padding-bottom: 20px">
          <div
            ref="con"
            class="content"
            v-html="v.content"
            :style="{ height: flag ? 'auto' : '64px' }"
          ></div>
          <van-button
            v-if="show"
            type="primary"
            plain
            style="
              border: 0;
              position: absolute;
              right: 10px;
              bottom: 0px;
              background-color: transparent;
            "
            @click="flag = !flag"
            size="mini"
          >
            {{ flag ? '..收起' : '..展开' }}
          </van-button>
        </div>
      </dd>
      <dd>
        <div class="datetime">{{ v.datetime }}</div>
      </dd>
    </dl>
  </div>
</template>

<script setup>
import { defineProps, onMounted, ref } from 'vue'

defineProps(['v'])

const con = ref()
// 展开还是收起
const flag = ref(true)
// 隐藏显示开关
const show = ref(true)

onMounted(() => {
  if (con.value.offsetHeight <= 68) {
    show.value = false
  } else {
    flag.value = false
  }
})
</script>

<style lang="scss" scoped>
.commend {
  padding: 10px;
  dt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
    }
  }
  dd {
    .content {
      padding: 4px;
      font-size: 14px;
      overflow: hidden;
    }

    .datetime {
      padding-right: 10px;
      text-align: right;
    }
  }
}
</style>
